<template>
    <view class="dust-box">
       <view class="dust-item-box">
            <view class="top"><h4>今日指标</h4></view>
            <view class="cirs">
                <view class="item"><canvas canvas-id='pm25cir' id='pm25cir' type="2d" style="width:200upx;height:200upx;"></canvas><text class="t1" :style="{color: txtColor}">{{todayData.avg_pm25 || 0}}ug/m</text><text class="t2">PM2.5</text></view>
                <view class="item"><canvas canvas-id='pm10cir' id='pm10cir' type="2d" style="width:200upx;height:200upx;"></canvas><text class="t1" :style="{color: txtColor}">{{todayData.avg_pm10 || 0}}ug/m</text><text class="t2">PM10</text></view>
                <view class="item"><canvas canvas-id='tspcir' id='tspcir' type="2d" style="width:200upx;height:200upx;"></canvas><text class="t1" :style="{color: txtColor}">{{todayData.avg_tsp || 0}}ug/m</text><text class="t2">TSP</text></view>
            </view>
        </view>
        <view class="dust-item-box">
            <view class="top"><h4>PM2.5</h4></view>
             <view class="hm1">
                <text>昨天</text>
                <view class="pros">
                    <view class="lbg green" :style="{width: yesterdayData.avg_pm25_percent + '%'}"></view>
                    <text class="num">{{yesterdayData.avg_pm25}}</text>
                </view>
            </view>
            <view class="hm1">
                <text>今天</text>
                <view class="pros">
                    <view class="lbg blue" :style="{width: todayData.avg_pm25_percent + '%'}"></view>
                    <text class="num">{{todayData.avg_pm25}}</text>
                </view>
            </view>
        </view>
        <view class="dust-item-box">
            <view class="top"><h4>PM10</h4></view>
             <view class="hm1">
                <text>昨天</text>
                <view class="pros">
                    <view class="lbg red" :style="{width: yesterdayData.avg_pm10_percent + '%'}"></view>
                    <text class="num">{{yesterdayData.avg_pm10}}</text>
                </view>
            </view>
            <view class="hm1">
                <text>今天</text>
                <view class="pros">
                    <view class="lbg blue" :style="{width: todayData.avg_pm10_percent + '%'}"></view>
                    <text class="num">{{todayData.avg_pm10}}</text>
                </view>
            </view>
        </view>
        <view class="dust-item-box">
            <view class="top"><h4>空气质量走向</h4><text class="tips">近一周空气污染指数</text></view>
            <view class="canbg">
                <canvas canvas-id="dustReport" id="dustReport"></canvas>
            </view>
        </view>
    </view>
</template>
<script>
import * as customcanvas from '@/utils/customcanvas'
import uCharts from '@/utils/u-charts.js'
export default {
    props: ['projectInfo'],
    data() {
        return{
            txtColor: '',
            lastData:'',
            todayData: '',
            weekData: '',
            yesterdayData: '',  
            chartBgColor: ['#218de7', '#20c529', '#ff9f40', '#ff6384'],          
            chartData: {
                categories: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"],
                series: []
            }
        }
    },
    mounted () {
        console.log(this.projectInfo);
        this.$axios({
           url: "UserApp/Source/getWeatherData",
           data: this.projectInfo,
           type: "smart"
         }).then(res => {
          if(res.data.Code == 200000) {
                this.lastData = res.data.returnData.data.lastData, 
                this.todayData = res.data.returnData.data.todayData,
                this.chartData.categories = res.data.returnData.data.week,
                this.weekData = res.data.returnData.data.weekData,
                this.yesterdayData = res.data.returnData.data.yesterdayData

                // 百分比
                this.todayData.avg_pm25_percent = this.todayData.avg_pm25_percent * 100
                this.todayData.avg_pm10_percent = this.todayData.avg_pm10_percent * 100
                this.todayData.avg_tsp_percent = this.todayData.avg_tsp_percent * 100
                 this.yesterdayData.avg_pm25_percent = this.yesterdayData.avg_pm25_percent * 100
                this.yesterdayData.avg_pm10_percent = this.yesterdayData.avg_pm10_percent * 100
                this.yesterdayData.avg_tsp_percent = this.yesterdayData.avg_tsp_percent * 100

                let avg_pm25 = [],avg_pm10=[],avg_tsp=[]
                console.log(this.weekData.length)
                if(this.weekData.length>0) {
                    this.weekData.forEach((arr, index)=>{
                        for(let i in arr){
                            if(i == 'avg_pm25') {
                                avg_pm25.push(arr[i])
                            } else if (i == 'avg_pm10') {
                                avg_pm10.push(arr[i])
                            } else {
                                avg_tsp.push(arr[i])
                            }
                        }
                    })

                    this.chartData.series = [
                        {name: 'avg_pm25',data: avg_pm25,color:this.chartBgColor[0]},
                        {name: 'avg_pm10',data: avg_pm10,color:this.chartBgColor[1]},
                        {name: 'avg_tsp',data: avg_tsp,color:this.chartBgColor[2]}
                    ]
                }
                this.todayData.avg_pm25_percent < 51?this.txtColor = '#6cb92c':this.todayData.avg_pm25_percent > 80?this.txtColor = '#ff5252':this.txtColor = '#ffb152'
                this.todayData.avg_pm10_percent < 51?this.txtColor = '#6cb92c':this.todayData.avg_pm10_percent > 80?this.txtColor = '#ff5252':this.txtColor = '#ffb152'
                this.todayData.avg_pm25_percent < 51?this.txtColor = '#6cb92c':this.todayData.avg_tsp_percent > 80?this.txtColor = '#ff5252':this.txtColor = '#ffb152'

                this.createCirl('pm25cir', this.todayData.avg_pm25_percent)
                this.createCirl('pm10cir', this.todayData.avg_pm10_percent)
                this.createCirl('tspcir', this.todayData.avg_tsp_percent)

                this.dustReport('dustReport' , this.chartData)
          } else {
              uni.showToast({
                  title: res.data.returnMsg,
                  icon: 'none',
                  mask: true,
                  duration: 2000
              });
                this.createCirl('pm25cir',0)
                this.createCirl('pm10cir',0)
                this.createCirl('tspcir',0)
          }
        }, (error) => {
            console.log(error)
        })
    },
    methods: {
        createCirl (canvasId,chartData) {
            var that  = this
            /* #ifdef H5 */
            const ctx = wx.createCanvasContext(canvasId, this)
            customcanvas.wave(ctx, chartData);
            /* #endif */
            /* #ifdef MP-WEIXIN */
            const query = uni.createSelectorQuery().in(this).select("#" + canvasId);
            query.fields({size: true,node: true}, data => {
                const canvas = data.node
                canvas.width = data.width
                canvas.height = data.width
                const ctx = canvas.getContext('2d')
                customcanvas.wave(ctx, chartData, canvas, data.width);
            }).exec();
            /* #endif */
        },
        dustReport (canvasId, data) {
            new uCharts({
                $this: this,
                canvasId: canvasId,
                type: 'line',
                fontSize:11,
                legend:{show:true},
                dataLabel:false,
                dataPointShape:false,
                background:'#FFFFFF',
                pixelRatio:1,
                categories: data.categories,
                series: data.series,
                animation: true,
                xAxis: {
                    disableGrid:true,
                    boundaryGap: 'justify'
                },
                yAxis: {
                    axisLine: false,
                    min:0
                },
                width:uni.upx2px(600),
                height:uni.upx2px(400),
                extra: {
                    line:{
                        type: 'curve'
                    }
                }
            })
        }
    }
}

</script>
<style lang="scss">
</style>